import React from "react";
import {Table, Breadcrumb, Button, Input, Tag, message} from 'antd';
import CustomLayout from "../../../components/CustomLayout/customLayout";
import {_deleteProductInfoById, _deleteRoleById, _queryProductInfoPage, _queryRolePage} from "../../../utils/apiList";

const {Search} = Input;

class ProductList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabData: [],
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tabLoading: false,
        };
    }

    componentDidMount() {
        this.loadTable()
    }

    loadTable() {
        const {pageNum, pageSize} = this.state;
        this.setState({tabLoading: true});
        _queryProductInfoPage({pageNo: pageNum, pageSize}).then((res) => {
            if (res.data.success) {
                this.setState({
                    tabData: res.data.data.list ? res.data.data.list : [],
                    total: res.data.data.total ? res.data.data.total : [],
                    tabLoading: false,
                })
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    }

    changePageSize(pageSize, current) {
        this.setState({pageSize, pageNum: 1}, () => this.loadTable())
    }

    changePage(current) {
        this.setState({pageNum: current}, () => this.loadTable())
    }

    addRecord = (record) => {

    };

    updateRecord = (record) => {

    };

    deleteRecord = (id) => {
        _deleteProductInfoById({id}).then((res) => {
            if (res.data.success) {
                message.success(<b>删除成功</b>, 3);
                this.loadTable();
            } else {
                message.error(<b>{res.data.msg}</b>, 3);
            }
        }).catch(error => {
            message.error(<b>请求失败！</b>, 3);
        });
    };

    render() {
        const {tabData, pageSize, pageNum, total, tabLoading} = this.state;
        const columns = [
            {
                title: '货号',
                dataIndex: 'productNo',
                key: 'productNo',
                width: 150,
            },
            {
                title: '名称',
                dataIndex: 'productName',
                key: 'productName',
                width: 200,
            },
            {
                title: '品牌',
                dataIndex: 'brandName',
                key: 'brandName',
                width: 150,
            },
            {
                title: '年度',
                dataIndex: 'annual',
                key: 'annual',
                align: 'center',
                width: 100,
            },
            {
                title: '季度',
                dataIndex: 'quarter',
                key: 'quarter',
                align: 'center',
                width: 100,
            },
            {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                align: 'center',
                width: 100,
            },
            {
                title: '库存',
                dataIndex: 'inventory',
                key: 'inventory',
                align: 'center',
                width: 100,
            },
            {
                title: '开放起始时间',
                dataIndex: 'openStart',
                key: 'openStart',
                align: 'center'
            },
            {
                title: '开放结束时间',
                dataIndex: 'openEnd',
                key: 'openEnd',
                align: 'center'
            },
            {
                title: '录入时间',
                dataIndex: 'gmtCreate',
                key: 'gmtCreate',
                align: 'center'
            },
            // {
            //     title: '录入人员',
            //     dataIndex: 'operator',
            //     key: 'operator',
            //     align: 'center'
            // },
            {
                title: '操作',
                key: 'fix',
                width: 300,
                align: 'center',
                render: (text, record) => (<div>
                    <Button style={{marginRight: 10}}>预览</Button>
                    <Button style={{marginRight: 10}} type="primary">修改</Button>
                    <Button type="danger" onClick={() => this.deleteRecord(record.id)}>删除</Button>
                </div>),
            },
        ];
        const expandedRowRender = (record) => {
            const columns = [
                {title: '颜色', dataIndex: 'color', key: 'color', align: 'center'},
                {
                    title: '尺码',
                    dataIndex: 'size',
                    key: 'size',
                    align: 'center',
                    render: (text, record) => (<Tag color="#2db7f5">{text}</Tag>),
                },
                {title: '数量', dataIndex: 'inventory', key: 'inventory', align: 'center'},
            ];
            return <Table columns={columns} dataSource={JSON.parse(record.ext1 ? record.ext1 : '[]')}
                          pagination={false}/>;
        };
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
        };
        return (
            <CustomLayout>
                <Breadcrumb style={{margin: '16px 0'}}>
                    <Breadcrumb.Item>品牌与产品管理</Breadcrumb.Item>
                    <Breadcrumb.Item>产品管理</Breadcrumb.Item>
                </Breadcrumb>
                <div className={'App-Section'}>
                    <div style={{margin: 10}}>
                        <Button style={{marginRight: 10}} type="primary" onClick={() => {
                            this.props.history.push('/tianyi/productUpload');
                            window.localStorage.setItem('menuSelect', '44');
                            window.localStorage.setItem('menuOpen', '4');
                        }}>新增</Button>
                        <Button style={{marginRight: 10}} type="primary">批量导出</Button>
                        <Button style={{marginRight: 10}} type="primary">批量上架</Button>
                        <Button style={{marginRight: 10}} type="primary">批量下架</Button>
                    </div>
                    <Table
                        bordered
                        columns={columns}
                        rowKey={'id'}
                        loading={tabLoading}
                        rowSelection={rowSelection}
                        expandedRowRender={expandedRowRender}
                        dataSource={tabData}
                        pagination={{
                            showSizeChanger: true,
                            showQuickJumper: false,
                            showTotal: () => `共${total}条`,
                            pageSize: pageSize,
                            current: pageNum,
                            total,
                            onShowSizeChange: (current, pageSize) => this.changePageSize(pageSize, current),
                            onChange: (current) => this.changePage(current),
                        }}
                    />
                </div>
            </CustomLayout>
        );
    }
}

export default ProductList;